<template>
	<view class="container">
		<nav-bar />
		<view class="reason">
			<textarea v-model="form.reason" style="background-color: #ffffff; width: 90%;" placeholder="请输入举报内容" />
		</view>
		<view class="input-group">
			<text class="star">*</text>
			<text class="label">举报类型</text>
			<uni-data-select v-model="form.type" :multiple="true" :localdata="checkData" placeholder="请选择举报类型" />
		</view>
		<view class="input-group">
			<text class="star">*</text>
			<text class="label">姓名</text>
			<input type="text" v-model="form.name" placeholder="请留下您的联系方式" placeholder-class="input-placeholder" />
		</view>
		<view class="input-group">
			<text class="star">*</text>
			<text class="label">联系电话</text>
			<input type="number" v-model="form.phone" placeholder="请留下您的联系方式" placeholder-class="input-placeholder" />
		</view>
		<view style="display: flex;width: 100%;padding-top: 3%;">
			<button size="mini" style="border: 1px solid #FFD700; background-color: transparent;"
				@tap="() => {$refs.orderListPop.open()}">选择订单</button>
			<button size="mini" style="border: 1px solid #FFD700; background-color: transparent;"
				@tap="() => {$refs.techListPop.open()}">选择技师</button>
		</view>
		<view v-if="selectedOrder" class="popCard">
			<view class="selectedTitle">
				<text>订单：</text>
				<text style="color: red;cursor: pointer;font-size: 10px;margin-right: 3%;" @tap="selectedOrder = null">
					取消选择
				</text>
			</view>
			<text>{{selectedOrder.storeName + ' - ' + selectedOrder.technicianName + ' - 实付：￥' + selectedOrder.paymentAmount + '元'}}</text>
			<text>订单编号：{{selectedOrder.orderNo}}</text>
		</view>
		<view v-if="selectedTech" class="popCard">
			<view class="selectedTitle">
				<text>技师：</text>
				<text style="color: red;cursor: pointer;font-size: 10px;margin-right: 3%;" @tap="selectedTech = null">
					取消选择
				</text>
			</view>
			<text>{{selectedTech.store.storeName + ' - ' + selectedTech.name + ' - ' + selectedTech.technicianCode}}</text>
		</view>
		<view class="upload-section">
			<view class="upload-title">上传图片/视频</view>
			<view class="upload-content">
				<view class="upload-list">
					<view class="upload-item" v-for="(item, index) in uploadedFiles" :key="index">
						<image v-if="item.type === 'image'" class="uploaded-image" :src="item.url" mode="aspectFill" />
						<video v-else-if="item.type === 'video'" class="uploaded-video" :src="item.url"
							:controls="false" :show-play-btn="true" :enable-progress-gesture="false" object-fit="cover">
						</video>
						<view class="delete-btn" @tap="deleteFile(index)">×</view>
					</view>
					<view class="upload-btn" @tap="chooseImage" v-if="uploadedFiles.length < 9">
						<image src="/static/icons/upload.png" mode="aspectFit" />
						<text>上传照片</text>
					</view>
					<!-- <view class="upload-btn" @tap="chooseVideo" v-if="!hasVideo">
						<image src="/static/icons/video.png" mode="aspectFit" />
						<text>上传视频</text>
					</view> -->
				</view>
			</view>
		</view>
		<button @tap="commit" class="fixed-bottom-btn">提交</button>
		<uni-popup ref="orderListPop" type="center">
			<view class="popView">
				<uni-card @tap="selectOrder(o)" class="popCard" v-for="(o, index) in orderList" :title="o.serviceName"
					:extra="getOrderType(o.orderStatus)">
					<text>门店名称：{{o.storeName}}</text>
					<text>技师名称：{{o.technicianName}}</text>
					<text>订单编号：{{o.orderNo}}</text>
					<text>实付：￥{{o.paymentAmount}}元</text>
					<text>项目金额：{{o.servicePrice}}</text>
					<text v-if="o.transportPrice">路费：{{o.transportPrice}}</text>
					<text>预约时间：{{o.appointmentDate + ' ' + o.appointmentTime }}</text>
					<text>创建时间：{{o.createTime}}</text>
				</uni-card>
			</view>
			<button style="margin-top: 3%;" @tap="$refs.orderListPop.close()">关闭</button>
		</uni-popup>
		<uni-popup ref="techListPop" type="center">
			<view class="popView">
				<uni-card @tap="selectTech(t)" class="popCard" v-for="(t, index) in techList" :title="t.name"
					:extra="t.store.storeName">
					<text>技师编号：{{t.technicianCode}}</text>
					<text>技师类型：{{t.technicianType}}</text>
					<text>{{t.isSelf === 1 ? '自营技师' : '非自营技师'}}</text>
					<text>评分：{{t.score}}分</text>
					<text style="display: inline;">
						技师技能：
						<text style="display: inline;" v-for="(c, index) in t.categories">
							{{ (index === 0 ? '' : '、') + c.categoryName}}
						</text>
					</text>
				</uni-card>
			</view>
			<button style="margin-top: 3%;" @tap="$refs.techListPop.close()">关闭</button>
		</uni-popup>
	</view>
</template>

<script>
	import NavBar from '../../components/nav-bar/nav-bar.vue';
	import {
		request
	} from '../../utils/request';

	export default {
		components: {
			NavBar
		},
		data() {
			return {
				checkData: [{
					"value": 1,
					"text": "技师要求进行线下交易或索要小费"
				}, {
					"value": 2,
					"text": "技师要求向顾客索要联系方式"
				}, {
					"value": 3,
					"text": "技师有骚扰、攻击性行为或其他不当举动"
				}, {
					"value": 4,
					"text": "其它"
				}],
				hasVideo: false,
				uploadedFiles: [],
				form: {},
				selectedTech: null,
				techList: [],
				selectedOrder: null,
				orderList: [],
			}
		},
		created() {
			this.initData()
		},
		methods: {
			deleteFile(index) {
				const file = this.uploadedFiles[index]
				if (file.type === 'video') {
					this.hasVideo = false
				}
				this.uploadedFiles.splice(index, 1)
			},
			commit() {
				if (!this.form.type) {
					uni.showToast({
						title: '请选择举报类型',
						icon: 'error',
						duration: 2000
					})
					return
				} else {
					if (this.form.type === 4 && !this.form.reason) {
						uni.showToast({
							title: '请输入举报内容',
							icon: 'error',
							duration: 2000
						})
						return
					}
				}
				if (!this.form.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (!this.form.phone) {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'error',
						duration: 2000
					})
					return
				}
				if (this.uploadedFiles) {
					this.form.url = this.uploadedFiles.map(file => file.url).join(',')
				}
				request({
					url: `${uni.$config.baseUrl}/report/technician`,
					method: 'POST',
					data: this.form
				}).then(res => {
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'error',
						duration: 2000
					})
				})
			},
			async chooseVideo() {
				try {
					const res = await uni.chooseVideo({
						compressed: true,
						sourceType: ['camera', 'album']
					})
					uni.showLoading({
						title: '上传中...',
						mask: true
					})
					const uploadRes = await uni.uploadFile({
						url: `${uni.$config.baseUrl}/minio/upload/video`,
						filePath: res.tempFilePath,
						name: 'file',
						formData: {}
					})
					const data = JSON.parse(uploadRes.data)
					if (data.code === 200) {
						this.uploadedFiles.push({
							type: 'video',
							url: data.url
						})
						this.hasVideo = true
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						})
					} else {
						throw new Error(data.msg || '上传失败')
					}
				} catch (err) {
					uni.showToast({
						title: err.message || '上传失败',
						icon: 'none'
					})
				} finally {
					uni.hideLoading()
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 9 - this.uploadedFiles.length,
					success: (res) => {
						const newFiles = res.tempFilePaths.map(path => ({
							type: 'image',
							url: path
						}))
						this.uploadedFiles.push(...newFiles)
					}
				})
			},
			selectTech(tech) {
				this.selectedTech = tech
				this.$refs.techListPop.close()
				this.form.techId = tech.id
			},
			selectOrder(order) {
				this.selectedOrder = order
				this.$refs.orderListPop.close()
				this.form.orderId = order.id
			},
			getOrderType(type) {
				switch (type) {
					case 0:
						return '待支付'
					case 1:
						return '待服务'
					case 2:
						return '服务中'
					case 3:
						return '已完成'
					case 4:
						return '已取消'
					case 5:
						return '已退款'
				}
			},
			async initData() {
				const userInfo = uni.getStorageSync('userInfo')
				request({
					url: `${uni.$config.baseUrl}/orders/orders/listAll`,
					method: 'GET',
					data: {
						userId: userInfo.memberId
					}
				}).then(res => {
					this.orderList = res.rows
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'error',
						duration: 2000
					})
				})
				request({
					url: `${uni.$config.baseUrl}/technician/technician/listAll`,
					method: 'GET',
				}).then(res => {
					this.techList = res.rows
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'error',
						duration: 2000
					})
				})
			}
		}
	}
</script>

<style>
	.popView {
		background-color: #fff;
		width: 95vw;
		height: 80vh;
		overflow-y: auto;
	}

	.selectedTitle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
	}

	.upload-section {
		margin-top: 3%;
		background: #FFFFFF;
		padding: 30rpx;

		.upload-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.upload-content {
			.upload-list {
				display: flex;
				flex-wrap: wrap;

				.upload-item {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
					position: relative;
					overflow: hidden; // 添加overflow防止视频超出容器

					.uploaded-image,
					.uploaded-video {
						width: 100%;
						height: 100%;
						border-radius: 8rpx;
					}

					.uploaded-video {
						object-fit: cover;
					}

					.delete-btn {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						width: 40rpx;
						height: 40rpx;
						background: rgba(0, 0, 0, 0.5);
						border-radius: 50%;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
					}
				}

				.upload-btn {
					width: 160rpx;
					height: 160rpx;
					background: #F8F8F8;
					border-radius: 8rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-right: 20rpx;
					margin-bottom: 20rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-bottom: 10rpx;
					}

					text {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}

	.input-group {
		background-color: #fff;
		height: 50px;
		margin-left: 5%;
		margin-right: 5%;
		display: flex;
		align-items: center;

		&:last-child {
			border-bottom: none;
		}

		.star {
			color: red;
			margin-right: 0;
			padding-right: 0;
		}

		.label {
			margin-left: 0;
			padding-left: 0;
			width: 140rpx;
			font-size: 28rpx;
			color: #333333;
			font-weight: 500;
		}

		input {
			flex: 1;
			font-size: 28rpx;
			color: #333333;
		}

		.input-placeholder {
			color: #999999;
		}
	}

	.container {
		padding-bottom: 60px;
		/* 预留底部空间，避免内容被遮挡 */
	}

	.fixed-bottom-btn {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 80%;
		background-color: #007AFF;
		color: white;
		border-radius: 20px;
	}

	.popCard {
		margin: 3% auto;
		width: 90%;
		font-size: 150%;
	}

	.popCard text {
		background-color: #fff;
		display: block;
		font-size: 85%;
		line-height: 1.2;
	}

	.reason {
		display: flex;
		justify-content: center;
		padding-top: 3%;
		padding-bottom: 3%;
	}
</style>